<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link href="../../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <script src="../../lib/layui-v2.6.3/layui.js"></script>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../js/lay-module/layuimini/miniTab.js"></script>
    <script src="../../js/template-web.js"></script>
</head>
<body>
    <div>
        <table class="layui-table"id="SpecTabledemo" lay-filter="SpecetCommditytest"></table>
    </div>
    <script id="barlist" type="text/html">
        <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }
        layui.use('table', function () {
            var table = layui.table;
            var layer=layui.layer;
            var id = getQueryString("id");
            table.render({
                elem: '#SpecTabledemo'
                , method: 'GET'
                , title: '商品规格表'
                , url: '/specsCommdity/page?id='+id //数据接口
                , page: {theme:'#1E9FFF'} //开启分页
                , limit: 10
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.records//解析数据列表
                    };
                }
                , cols: [[ //表头
                    {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                    , {field: 'csku', title: '商品规格',}
                    , {field: 'prices',title: '价格'}
                    , {field: 'stocks', title: '库存'}
                    , {field: 'createTime', title: '创建时间', sort: true}
                    , {fixed: 'right', title: '操作', toolbar: '#barlist'}
                ]]
            });
            //监听工具条
            table.on('tool(SpecetCommditytest)', function (obj) {
                var data = obj.data;
              if (obj.event === 'del') {
                    layer.confirm('真的删除该商品？', function (index) {
                        $.get("/specsCommdity/del", {"id": data.id}, function (ex) {
                            if (ex.code==0) {
                                obj.del();
                                layer.close(index);
                            } else {
                                layer.msg(ex.msg)
                            }
                        })
                    });
                }
            });
        })
    </script>
</body>
</html>